@import 'assets/stylesheets/gutenberg-base-styles';
@import '~@wordpress/base-styles/colors';
@import '../../mixins';
@import '../../variables.scss';

.design-selector {
	background-color: var( --contrastColor );
	color: var( --mainColor );
	padding-bottom: $onboarding-footer-height;

	.design-selector__header {
		@include onboarding-heading-padding;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.design-selector__heading {
		flex-grow: 1;
	}

	.design-selector__grid {
		margin: 0 -32px 30px;
	}

	.design-selector__design-option {
		cursor: pointer;
		float: left;
		width: 100%;
		margin: 32px; // only applies in IE

		&:hover,
		&:focus {
			.design-selector__image-frame {
				border-color: var( --highlightColor );
			}
		}

		@include break-mobile {
			width: calc( 50% - 32px );
		}

		@include break-large {
			width: calc( 33.33% - 64px );
		}

		@include onboarding-break-gigantic {
			width: calc( 25% - 64px );
		}
	}

	@supports ( display: grid ) {
		.design-selector__grid {
			display: grid;
			grid-template-columns: 1fr;
			row-gap: 48px;
			margin: 0 0 30px;

			@include break-mobile {
				grid-template-columns: 1fr 1fr;
				column-gap: 32px;
			}

			@include break-large {
				grid-template-columns: 1fr 1fr 1fr;
				column-gap: 64px;
			}

			@include onboarding-break-gigantic {
				grid-template-columns: 1fr 1fr 1fr 1fr;
			}
		}

		.design-selector__design-option {
			width: auto;
			margin: 0;

			@include break-large {
				width: auto;
			}

			@include onboarding-break-gigantic {
				width: auto;
			}
		}
	}

	.design-selector__image-frame {
		display: block;
		width: 100%;
		height: 0;
		padding-top: 360px / 480px * 200%;
		border: 2px solid var( --studio-gray-5 );
		position: relative;
		overflow: hidden;

		img {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 100%;
			height: auto;
		}
	}

	.design-selector__option-meta {
		display: inline-grid;
		margin-top: 8px;
		width: 100%;
		gap: 6px;
		grid-template-columns: 1fr [name] auto [badge] 1fr;

		> * {
			// This is to create space between Tooltip component and other elements
			min-height: 2em;
		}
	}

	.design-selector__option-name {
		@include onboarding-medium-text;
		align-self: center;
		color: var( --studio-gray-40 );
		grid-area: name;
		padding: 2px 0; // To match line-alignment with premium badge
		text-align: center;
	}

	.design-selector__premium-container {
		grid-area: badge;
		text-align: left;
	}

	.design-selector__premium-badge {
		background-color: var( --studio-black );
		border-radius: 1em;
		color: var( --studio-white );
		margin: 0;
		padding: 2px 8px;
		white-space: nowrap;
	}

	.design-selector__premium-badge-logo {
		margin-left: -4px;

		.jetpack-logo__icon-circle {
			fill: transparent;
		}

		.jetpack-logo__icon-triangle {
			fill: var( --studio-white );
		}
	}
}
